import * as Ant from 'antd';
import { useState } from 'react';

interface IFirstFormItem {
  title: string;
  component: 'Select';
}

type IComponentType = 'Input' | 'Select' | 'InputNumber';

interface ISecondFormItem {
  title: string;
  component: IComponentType;
}

interface IListItem {
  title: string;
  form: [IFirstFormItem, ISecondFormItem];
}

const options = [
  {
    label: 'Input',
    value: 'Input',
  },
  {
    label: 'Select',
    value: 'Select',
  },
  {
    label: 'InputNumber',
    value: 'InputNumber',
  },
];

let editingIdx = -1;

export default function App () {

  // const inpRef = useRef<R>(null);
  const [visible, setVisible] = useState<boolean>(false);
  const [activeKey, setActiveKey] = useState<number>(-1);
  const [list, setList] = useState<IListItem[]>([
    {
      title: 'xxxx',
      form: [
        {
          title: '关联类型',
          component: 'Select',
        },
        {
          title: 'Input',
          component: 'Input', // 改这里
        },
      ],
    },
    {
      title: 'adssada',
      form: [
        {
          title: '关联类型',
          component: 'Select',
        },
        {
          title: 'Input',
          component: 'Input',
        },
      ],
    },
  ]);

  function onSelect (i: number, type: IComponentType) {
    const newList = list.concat();
    newList[i] = {
      ...newList[i],
      form: [
        newList[i].form[0],
        {
          title: type,
          component: type,
        },
      ],
    };
    setList(newList);
  }

  function onChange () {

  }

  function createList () {
    return list.map((item, i) => {
      return (
        <Ant.Collapse.Panel 
          key={ i } 
          header={ 
            <>
              { item.title } 
              <Ant.Button type="link" onClick={ () => onEdit(i) }>修改</Ant.Button>
              <Ant.Button type="link" onClick={ () => onDelete(i) }>删除</Ant.Button>
            </> 
          }
        >
          <Ant.Form>
            {
              item.form.map((formItem, j) => {
                const FormComponent: any = Ant[formItem.component]; // Ant.Select
                const componentProps: any = {
                  onChange,
                };
                if (formItem.component === 'Select') {
                  componentProps.onChange = (value: any) => onSelect(i, value);
                  componentProps.options = options;
                  componentProps.defaultValue = options[0].value;
                }
                return (
                  <Ant.Form.Item key={ j } label={ formItem.title }>
                    <FormComponent { ...componentProps } />
                  </Ant.Form.Item>
                );
              })
            }
          </Ant.Form>
        </Ant.Collapse.Panel>
      );
    });
  }

  // 新增
  function onCreate () {
    const len = list.length;
    setList(list.concat({
        title: (document.querySelector('#create-inp') as HTMLInputElement)?.value,
        form: [
          {
            title: '关联类型',
            component: 'Select',
          },
          {
            title: 'Input',
            component: 'Input',
          },
        ],
      }));
      setActiveKey(len);
      setVisible(false);
  }

  // 删除
  function onDelete (i: number) {
    setList(list.filter((item, idx) => idx !== i));
    setActiveKey(-1);
  }

  // 修改
  function onEdit (i: number) {
    editingIdx = i;
    setVisible(true);
  }

  function onEditOk () {
    setList(list.map((item, i) => {
      if (i === editingIdx) {
        return {
          ...item,
          title: (document.querySelector('#create-inp') as HTMLInputElement)?.value,
        };
      }
      return item;
    }));
    editingIdx = -1;
    setVisible(false);
  }

  return (
    <div className="App">
      <Ant.Collapse 
        activeKey={ activeKey } 
        accordion
        onChange={ (key) => {
          setActiveKey(- -key);
        } }
      >
        { createList() }
      </Ant.Collapse>
      <Ant.Button onClick={ () => setVisible(true) }>添加</Ant.Button>

      <Ant.Modal
        title="请输入名称" 
        visible={ visible } 
        onOk={ editingIdx === -1 ? onCreate : onEditOk } 
        onCancel={ () => setVisible(false) }
        destroyOnClose
      >
        <Ant.Input id="create-inp" />
      </Ant.Modal>
    </div>
  );
}
